<template>
    <view class="page-home">
        <view class="page-body">
            <view class="page-section page-section-gap">
                <map style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="covers">
                </map>
            </view>
        </view>
		
		<view class="page-button" @click="takePhoto">扫码</view>
		<u-toast ref="uToast" />
		
		<u-popup v-model="show" mode="center" width="700rpx" height="600rpx">
			<view class="wrap">
				<u-swiper :list="list"></u-swiper>
			</view>
			<view type="primary" @click="tackDown" class="button-box">掉水</view>
		</u-popup>
    </view>
</template>

<script>
  export default {
      data() {
          return {
              id:0, 
              title: 'map',
              latitude: 39.909,
              longitude: 116.39742,
			  covers:[],
			  src: "",
			  show: false,
			  deviceNo: '',
			  list: [{
			  		image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
			  		title: '昨夜星辰昨夜风，画楼西畔桂堂东'
			  	},
			  	{
			  		image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
			  		title: '身无彩凤双飞翼，心有灵犀一点通'
			  	},
			  	{
			  		image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
			  		title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
			  	}
			  ],
          }
      },
	  onLoad() {
		  let that = this
	  	uni.getLocation({
	  	    type: 'gcj02',
	  	    success: function (res) {
				that.latitude = res.latitude
				that.longitude = res.longitude
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				that.covers[0] = {
					    latitude: res.latitude,
					    longitude: res.longitude,
						iconPath: '../../static/位置.png'
				}
	  	        
	  	    }
	  	});
		
	  },
      methods: {
		  tackDown() {
		  	const user = uni.getStorageSync('user')
		  	uni.request({
		  		url: 'http://47.115.27.217:8091/device/open', // 请求路径
		  		method: 'POST', //请求方式
		  		data: {
		  			deviceNo: this.deviceNo,
		  			userId: user
		  		},
		  		success: result => {
		  			//响应成功
		  			console.log(result)
		  			if (result.data.code === 0) {
		  				this.$refs.uToast.show({
		  					title: '掉水成功',
		  					type: 'success',
		  				})
		  
		  			} else {
		  				this.$refs.uToast.show({
		  					title: result.data.msg,
		  					type: 'error',
		  				})
		  			}
		  
		  			this.show = false
		  		},
		  		fail: err => {
		  			console.log(err);
		  		} //失败
		  	})
		  
		  
		  },
		  GetRequest(urlStr) {
		  	if (typeof urlStr == "undefined") {
		  		var url = decodeURI(location.search); //获取url中"?"符后的字符串
		  	} else {
		  		var url = "?" + urlStr.split("?")[1];
		  	}
		  	var theRequest = new Object();
		  	if (url.indexOf("?") != -1) {
		  		let str = url.substr(1);
		  		let strs = str.split("&");
		  		for (var i = 0; i < strs.length; i++) {
		  			theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
		  		}
		  	}
		  	return theRequest;
		  },
		  
		  takePhoto() {
		  	// const ctx = uni.createCameraContext();
		  	// ctx.takePhoto({
		  	//     quality: 'high',
		  	//     success: (res) => {
		  	//         this.src = res.tempImagePath
		  	//     }
		  	// });
		  	let that = this
		  	uni.scanCode({
		  		success: function(res) {
		  			console.log('条码类型：' + res.scanType);
		  			console.log('条码内容：' + res.result);
		  			const resultObj = that.GetRequest(res.result);
		  			that.deviceNo = resultObj.s
		  			// uni.showToast({
		  			//     title: '条码内容：' + res.result,
		  			//  icon:false,
		  			//     duration: 2000
		  			// });
		  			if (that.deviceNo) {
		  				that.show = true
		  			} else {
		  				that.$refs.uToast.show({
		  					title: '不支持该设备',
		  					type: 'error',
		  				})
		  			}
		  
		  			// that.$refs.uToast.show({
		  			// 	title: '条码内容：' + that.deviceNo,
		  			// 	type: 'success',
		  			// })
		  		},
		  		error(e) {
		  			console.log(e.detail);
		  		}
		  	});
		  },
      }
  }
</script>

<style>
	.page-home {
		position: relative;
	}
	
	.page-button {
		position: absolute;
		width: 90vw;
		height: 50px;
		background-color: #007AFF;
		bottom: 20px;
		left: 5vw;
		line-height: 50px;
		color: #FFF;
		text-align: center;
		border-radius: 10px;
	}
	
	.button-box {
		width: 100%;
		height: 80rpx;
		color: #FFF;
		line-height: 80rpx;
		text-align: center;
		/* background-color: #19BE6B; */
	
		background: linear-gradient(to right, #185ADB 0%, #39A2DB 100%);
		margin-top: 40rpx;
		border-radius: 20rpx;
		font-weight: 400;
	}
	
	.wrap {
		padding: 40rpx;
	}
</style>

